<template>
  <div class="font-inter text-dark relative flex min-h-screen flex-col bg-gray-50">
    <!-- 视图容器 -->
    <div class="container mx-auto flex-grow p-6 md:p-8">
      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <!-- 左侧：拖拽上传区域和上传列表 -->
        <div class="space-y-6 lg:col-span-2">
          <!-- 拖拽上传区域&操作按钮 -->
          <ActionBtns
            :fileList="options.fileList"
            :accept="options.accept"
            :folder="options.folder"
            :addFile="options.addFile"
            :allStart="options.allStart"
            :allPause="options.allPause"
            :allResume="options.allResume"
            :allDel="options.allDel"
            :maxTotalSize="options.maxTotalSize"
            :formatFileSize="options.formatFileSize"
            :disabled="options.isUpLoading"
          />

          <!-- 上传列表 -->
          <FileList
            :fileList="options.fileList"
            :isUpLoading="options.isUpLoading"
            :itemStart="options.itemStart"
            :itemDel="options.itemDel"
            :itemPause="options.itemPause"
            :itemResume="options.itemResume"
            :formatFileSize="options.formatFileSize"
            :formatUploadSpeed="options.formatUploadSpeed"
            :statusEnum="options.statusEnum"
            :filesTotalSize="options.filesTotalSize"
          />
        </div>

        <!-- 右侧：日志和任务信息 -->
        <div class="space-y-6">
          <!-- 任务队列信息 -->
          <TaskQueueInfo
            :queueStatus="options.queueStatus"
            :formatFileSize="options.formatFileSize"
            :totalSize="options.totalSize"
            :chunkSize="options.chunkSize"
          />

          <!-- 日志展示 -->
          <Log :logs="options.logs" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ActionBtns from './ActionBtns.vue'
import FileList from './FileList.vue'

import type { ViewContainerType } from '@/plugins/LargeFileUpload/types'

const props = defineProps({
  options: {
    type: Object,
    default: () => ({}) as ViewContainerType,
  },
})
onMounted(() => {
  console.log('props.options', props.options)
})
</script>
